<template>
    <van-popup v-model="showPop" position="bottom">
        <div class="con" v-if="showPop">
            <div class="fixed_header">
                <div>
                    <search v-model="keyWords" placeholder="请输入搜索关键词" @cancel="onCancel" show-action @input="inputChange"></search>
                </div>
                <div class="flex_space_between fs-mini  picker m-color">
                    <div class="row van-ellipsis" @click="$refs.bankPicker.showPicker()">{{bankInfo.text}}</div>
                    <div class="row van-ellipsis" @click="$refs.addressPicker.showPicker()">{{addressInfo.text}}</div>
                </div>
            </div>

            <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in data" :key="item.code" :title="item.text" :label="item.code" @click="chooseAction(item)" />
            </list>
        </div>

        <!-- picker -->
        <CommonPicker title="选择银行" ref="bankPicker" :columns="baseData.storeDic.bankInfoList" @commit="pickerCommit"></CommonPicker>
        <CommonPicker title="选择省市" ref="addressPicker" :columns="baseData.storeDic.regionList" @commit="addressCommit"></CommonPicker>
    </van-popup>
</template>

<script>

import { mapState } from 'vuex'
import { List, Search } from 'vant';
import CommonPicker from "@/components/picker/common-picker"


export default {

    components: { List, Search, CommonPicker },

    data() {
        return {
            keyWords: "",
            pageInfo: {
                pageNum: 0,
                pageSize: 20,
            },
            addressInfo: {
                text: "选择省市区",
                code: [],
            },
            bankInfo: {
                code: "",
                text: "请选择"
            },
            data: [],
            showPop: false,
            loading: false,
            finished: true,
            timeout: null,

        }
    },

    mounted() {
        this.reload();
    },

    computed: {
        ...mapState({
            baseData: state => state.baseData,
        }),

        cityCode() {
            if (this.addressInfo.code.length == 0) {
                return ""
            }
            return this.addressInfo.code[1]
        }
    },

    methods: {

        // 显示
        show() {
            this.showPop = true
        },

        // 取消事件
        onCancel() {
            this.showPop = false
        },

        // 选择开户行后
        chooseAction(e) {
            this.showPop = false
            this.$emit("done", e);
        },

        // 重新加载
        reload() {
            this.pageInfo = {
                pageNum: 0,
                pageSize: 20,
            };
            this.onLoad();
        },

        // 加载
        onLoad() {
            if (!this.bankInfo.code || !this.cityCode) {
                return;
            }
            this.loading = true;
            let params = {
                pageNum: this.pageInfo.pageNum + 1,
                pageSize: this.pageInfo.pageSize,
                headNo: this.bankInfo.code,
                bankAreaCode: this.cityCode,
                bankName: this.keyWords
            };
            this.$http.collectionBankNo(params).then(resp => {
                this.loading = false;
                if (resp === false) {
                    return false;
                }
                const { data, pageNum, pageSize, totalCount, totalPages } = resp;
                if (pageNum == 1) {
                    this.data = data;
                } else {
                    Array.prototype.push.apply(this.data, data);
                }
                // 设置分页信息
                this.pageInfo = {
                    pageNum: pageNum,
                    pageSize: pageSize,
                }
                if (totalPages <= pageNum) {
                    this.finished = true;
                } else {
                    this.finished = false;
                }
            });
        },

        inputChange() {
            if (this.timeout) {
                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(() => {
                this.reload();
            }, 1000);
        },

        // Picker 银行下拉框
        pickerCommit(e) {
            this.bankInfo = {
                code: e.code,
                text: e.showText
            }
            this.reload();
        },

        // Picker 省市区
        addressCommit(e) {
            console.log(e);
            this.addressInfo = {
                code: e.code,
                text: e.showText
            }
            this.reload();
        }

    }
}
</script>

<style lang="scss" scoped>
.con {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background-color: #f7f8fa;
    padding-top: 100px;

    .fixed_header {
        position: fixed;
        width: 100vw;
        height: 100px;
        top: 0;
        left: 0;
        z-index: 10;
        background-color: #fff;

        .picker {
            .row {
                background-color: #fff;
                width: 49.9%;
                text-align: center;
                padding: 0 0 10px 0;
            }
        }
    }
}
// .van-popup {
//     background-color: inherit;
// }
</style>